<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" type="text/css" href="../css/beiyong.css" />
		<style type="text/css">
			.wt {
				border-bottom: 1px solid #CCCCCC;
				border-top: 1px solid #CCCCCC;
				padding: 10px;
			}
			
			.wt>div:first-child {
				padding-bottom: 10px;
			}
			
			.lx {
				padding: 10px;
				border-bottom: 1px solid #CCCCCC;
			}
			
			.lx label {
				padding: 11px 0;
			}
			
			.img {
				padding: 10px;
			}
			
			.pb10 {
				padding-bottom: 10px;
			}
			
			.imglist {
				width: 100%;
				display: flex;
				justify-content: flex-start;
				align-items: center;
			}
			
			.imgcss {
				width: 5rem;
				height: 5rem;
				border: 1px solid #CCCCCC;
				margin-right: 0.7em;
				position: relative;
			}
			
			.imgcss img {
				width: 100%;
				height: 100%;
			}
			
			.addcss {
				width: 5rem;
				height: 5rem;
				border: 1px solid #CCCCCC;
				background: #fff;
				position: relative;
			}
			
			.addcss>input {
				position: relative;
				opacity: 0;
				display: block;
				height: 100%;
				width: 100%;
				z-index: 998;
			}
			
			.addcss>span {
				text-align: center;
				width: 2rem;
				height: 2rem;
				font-size: 3rem;
				margin: auto;
				position: absolute;
				top: 0;
				left: 0;
				bottom: 0;
				right: 0;
				z-index: 5;
			}
			
			.guanbi {
				position: absolute;
				z-index: 99;
				top: -15%;
				left: 80%;
				border: 1px solid #C0C0C0;
				border-radius: 50%;
				background-color: white;
			}
			
			.subut {
				position: fixed;
				bottom: 0;
				margin: 0;
				background: #7DB1FD;
				border: 0;
			}
			
			.textcss {
				font-size: 0.8em;
			}
			
      input::-webkit-input-placeholder {
          /* placeholder颜色  */
         color: #aab2bd;
         /* placeholder字体大小  */
        font-size: 12px;
         /* placeholder位置  */
         text-align: right;
     }
     .gd{
     	width: 100%;
     	height: 80px;
     }
     button{
     	z-index: 9;
     }
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav hbg">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">反馈</h1>
		</header>
		<div class="mui-content">
			<form action="">
				<div class="wt">
					<div class="">
						问题与意见
					</div>
					<div class="">
						<textarea name="" rows="7" cols="22" id="feed"></textarea>
					</div>
				</div>
				<div class="lx">
					<div class="mui-input-row">
						<label id="lianxi" onclick="muipur()" class="textcss">点击选择</label>
						<input type="text" id="mobile" placeholder="微信(默认)/QQ/邮箱">
					</div>
				</div>
				<div class="img">
					<div class="pb10">
						图片（选填）
					</div>
					<div class="imglist" id="imgid">
						<div class="addcss" id="addcss">
							<input type="file" name="file2" id="going" accept="image/*" multiple="multiple">
							<span>+</span>
						</div>
					</div>
				</div>
				<div class="gd"></div>
				<button type="button" class="mui-btn mui-btn-blue mui-btn-block subut" onclick="sub()">提交</button>
			</form>
		</div>

		<script src="../js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/mui.min.js"></script>
		<script src="../js/muishow.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/req.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
		
			var imglist = new Array();
			var fileArr = [];
			var lianxi = "";
			var midlist = [];

			window.onload = function() {
				$("#going").on("change", function() {
					if(typeof FileReader == undefined) {
						console.log("不支持filereader");
					} else {
						let input = document.getElementById("going");
						let imgid = document.getElementById("imgid");
						let addcss = document.getElementById("addcss");
						
						for(let i = 0; i < this.files.length; i++) {
							if(!input['value'].match(/.jpg|.gif|.png|.bmp/i)) {　　
							 //判断上传文件格式
								return alert("上传的图片格式不正确，请重新选择");　　　　　　　　
							}
							fileArr.push(this.files[i]);
							let reader = new FileReader();
							reader.readAsDataURL(this.files[i]);
							//imglist.push(this.files[i]);
							reader.onload = function(e) {
								result = '<div class="guanbi mui-icon mui-icon-closeempty" onclick="remove(this)"></div><img src="' + this.result + '" alt=""/>';
								div = document.createElement('div');
								
								if(imglist.length < 4) {
									imglist.push(this.result);
									input.value = "";
									setaddcss();
								} else {
									mui.alert("只能上传4张图片");
									setaddcss();
									return;
								}
								div.className = "imgcss";
								div.innerHTML = result;
								addcss.parentNode.insertBefore(div, addcss);　　　　　　　　　　
							}
						}
					}
				})
			}

			function setFile(fileSrc) {
				var image = new Image();
				image.src = fileSrc;
				fileArr.push(image);
			}

			function muipur() {
				//mui.confirm('请选择联系类型');
				//return;
				var btnArray = ['微信', 'QQ', '邮箱'];
				mui.confirm(' ', '请选择联系类型', btnArray, function(e) {
					let lab = document.getElementById("lianxi");
					lianxi = btnArray[e.index];
					lab.innerHTML = lianxi;
				})
			}

			function setaddcss() {
				if(imglist.length >= 4) addcss.classList.add("mui-hidden");
				else addcss.classList.remove("mui-hidden");
			}

			function remove(obj) {
				let z = $('.guanbi').index(obj);
				$(obj).parent().remove();
				imglist.splice(z, 1);
				fileArr.splice(z, 1);
				setaddcss();
			}

			function sub() {
				if(!yanz()) {
					return;
				}
				upimg();
			}

			function yanz() {
				let feed = document.getElementById("feed");
				let mobile = document.getElementById("mobile");
				let going = document.getElementById("going");
				if("" == feed.value || " " == feed.value || null == feed.value) {
					mui.toast("问题不能为空-_-!")
					return false;
				}
				if("" == mobile.value || " " == mobile.value || null == mobile.value) {
					mui.toast("联系方式不能为空-_-!")
					return false;
				}
				// if("" == going.value || " " == going.value || null == going.value){}

				return true;

			}

			function upimg() {
				let i = 0;

               
                if(fileArr.length){
					strat(fileArr);
				}else{
					subcontent();
				}
				function strat(fileArr) {
					let arr = fileArr;
					upladfile(arr[i], function(res) {
						console.log(res);
						if(res.code == 1) {
							midlist.push(res.data[0].mid);
						}
						if(res.code == -1) {
							mui.toast(res.message);
						}
						if(i < fileArr.length-1) {
							i++;
							strat(fileArr)
						}else{
							
							subcontent();
						}
					})
				}


			}
			function subcontent(){
				let feed = document.getElementById("feed");
				let mobile = document.getElementById("mobile");
				let data = {
					url: "/api/System/go_feedback",
					data: {
						access_token: acctoken() || "",
						content: feed.value || "",
						contact_category: lianxi || "微信",
						contact: mobile.value || "",
						feedback_img:midlist || "",
					}
				};
				console.log(data);
				ajax(data, function(res) {
					console.log(res);
					if(res.code == -1) {
						mui.toast(res.message);
					}
					if(res.code == 1) {
						mui.toast("问题反馈成功");

					}
				})
				
				
			}
		
		</script>
	</body>

</html>